import React from 'react';
import { NavLink, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import './Sidebar.css';

interface SidebarProps {
    collapsed: boolean;
}

const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
    const { t } = useTranslation();

    const menuItems = [
        {
            path: '/',
            icon: '📊',
            label: t('common.dashboard'),
            exact: true
        },
        {
            path: '/users',
            icon: '👥',
            label: t('common.users')
        },
        {
            path: '/products',
            icon: '📦',
            label: t('common.products')
        },
        {
            path: '/orders',
            icon: '📋',
            label: t('common.orders')
        },
        {
            path: '/analytics',
            icon: '📈',
            label: t('common.analytics')
        },
        {
            path: '/settings',
            icon: '⚙️',
            label: t('common.settings')
        },
        {
            path: '/test',
            icon: '🧪',
            label: t('common.test')
        }
    ];

    return (
        <aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
            <div className="sidebar-header">
                <div className="logo">
                    <span className="logo-icon">🏢</span>
                    {!collapsed && <span className="logo-text">管理后台</span>}
                </div>
            </div>

            <nav className="sidebar-nav">
                <ul className="nav-list">
                    {menuItems.map((item) => (
                        <li key={item.path} className="nav-item">
                            <NavLink
                                to={item.path}
                                end={item.exact}
                                className={({ isActive }) =>
                                    `nav-link ${isActive ? 'active' : ''}`
                                }
                                title={collapsed ? item.label : undefined}
                            >
                                <span className="nav-icon">{item.icon}</span>
                                {!collapsed && <span className="nav-label">{item.label}</span>}
                            </NavLink>
                        </li>
                    ))}
                </ul>
            </nav>

            {/* <div className="sidebar-footer">
                <div className="footer-links">
                    <Link to="/" className="footer-link">
                        <span className="footer-icon">🏠</span>
                        {!collapsed && <span className="footer-label">{t('common.home')}</span>}
                    </Link>
                </div>
                <div className="user-info">
                    <div className="user-avatar">👤</div>
                    {!collapsed && (
                        <div className="user-details">
                            <div className="user-name">管理员</div>
                            <div className="user-role">超级管理员</div>
                        </div>
                    )}
                </div>
            </div> */}
        </aside>
    );
};

export default Sidebar;
